/*
 * @Author: your name
 * @Date: 2021-04-02 10:26:17
 * @LastEditTime: 2021-05-30 19:36:14
 * @LastEditors: your name
 * @Description: In User Settings Edit
 * @FilePath: \遵义d:\HTML001\布局小技巧\鼠标触发相册\相册.js
 */
// 获取box的节点
const box = document.getElementsByClassName("box")[0];

// 给box添加监听事件
box.addEventListener("mousemove", fun);

// 声明一个数组变量添加图片地址等下用下标取出图片
const imgs = [
  "../imgs/02.jpg",
  "../imgs/03.jpg",
  "../imgs/04.jpg",
  "../imgs/05.jpg",
  "../imgs/06.jpg",
  "../imgs/07.jpg",
  "../imgs/08.jpg",
  "../imgs/09.jpg",
  "../imgs/10.jpg",
  "../imgs/11.jpg",
];

// box的监听函数
function fun(e) {
  // 这里用随机数取出相册中的随机一张照片
  const num = parseInt(Math.random() * 10);

  // 创建一个img标签
  const a = document.createElement("img");

  // 添加到box下
  box.appendChild(a);

  // 给创建的img设置css中写好的的类名
  a.className = "img";

  // 利用随机数作为下标，取出数组，还保证了每次取出的照片都不一样
  a.src = imgs[num];

  // 因为上面给img添加的css类中已经开启定位，所以这里利用鼠标的坐标可以直接设置img的位置
  // y轴减去90是因为定位是根据元素左上角，图片会定到下面，90px是元素css高度
  a.style.top = e.clientY - 90 + "px";
  
  a.style.left = e.clientX + "px";
  // 用定时器执行完动画的img删除
  setTimeout(function () {
    box.removeChild(a);
  }, 3000);
  // console.log(e.clientX);
  // console.log(e.clientY);
  // console.log(e)
}
